﻿
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>商品管理</cite></a>
        <a><cite>商品列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<style>
    .layui-table-cell {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div style="margin-top: 50px;margin-bottom:100px">
    <form class="layui-form" onsubmit="return false">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" id="Name" class="layui-input" />
            </div>
            <label class="layui-form-label">型号</label>
            <div class="layui-input-inline">
                <input type="text" id="XingHao" class="layui-input" />
            </div>
            <label class="layui-form-label">材质</label>
            <div class="layui-input-inline">
                <input type="text" id="CaiZhi" class="layui-input" />
            </div>
            <label class="layui-form-label">是否显示在首页</label>
            <div class="layui-input-inline">
                <select id="HomeFlag" style="width:70px">
                    <option value="">全部</option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                </select>
            </div>
            <button id="search" data-type="reload" class="layui-btn">搜索</button>
        </div>
    </form>
    <button class="layui-btn" id="create">新建商品</button>
    <table id="my_table" lay-filter="mjf"></table>
    @*<script type="text/html" id="top_tool">
            <button class="layui-btn" lay-event="create">新建商品</button>
        </script>*@
    <!--行内工具-->
    <script type="text/html" id="inline_tool">
        <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
    </script>
</div>

@section Scripts{
    <script>

        layui.use(['laydate', 'laypage', 'layer', 'table'], function () {
            var $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            laypage = layui.laypage;//分页
            var layer = layui.layer;//弹出层
            var table = layui.table;

            table.render({
                elem: '#my_table',
                url: '/Admin/Product/list',
                method: "get",
                toolbar: '#top_tool',
                //heads: {
                //    'content-type': 'application/x-www-form-urlencoded'
                //},
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
				cols: [[{
				    type: 'checkbox'
				}, {
				    field: 'id',
				    title: 'Id'
				}, {
				    field: 'name',
				    title: '商品名称',
				}, {
				    field: 'picUrl',
				    title: '图片地址'
				}, {
				    field: 'picUrl',
				    title: '图片',

				    templet: '<div><img src="/{{d.PicUrl}}"</div>'

				},{
				    field: 'productPrice',
				    title: '产品售价',
				}, {
				    field: 'marketPrice',
				    title: '市场售价',
				}, {
				    field: 'xingHao',
				    title: '型号',
				}, {
				    field: 'caiZhi',
				    title: '材质',
				}, {
				    field: 'typeName',
				    title: '所属分类',
				}, {
				    field: 'homeFlag',
				    title: '是否显示在首页',
				}, {
				    fixed: 'right',
				    title: '操作',

				    toolbar: '#inline_tool'
					}]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: true,
                skin: 'line'
			});
			var active = {
				reload: function() {
					table.reload('my_table', {
						where: {
						    Name: $("#Name").val(),
						    XingHao: $("#XingHao").val(),
						    CaiZhi: $("#CaiZhi").val(),
						    HomeFlag: $("#HomeFlag").val()
						}
					})
				}
			};
			$("#search").click(function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

            $("#create").click(function () {
                layer.open({
                    type: 2,
                    area: ['600px', '500px'],
                    content: 'Add' //这里content是一个普通的String
                });
            });

			//table.on('toolbar(mjf)', function(obj) {

			//	if(obj.event == "create") {
			//		layer.open({
			//			type: 2,
			//			area: ['800px', '750px'],
			//			content: 'AddProduct'
			//		});
			//	}
			//});
			table.on('tool(mjf)',function(obj){
				console.log(obj);
				var data=obj.data;
				if (obj.event == "edit") {
				    layer.open({
				        type: 2,
                        area: ['600px', '600px'],
				        content: 'Edit?Id='+data.id
				    });
				}else if(obj.event=="del"){
					layer.confirm("真的删除吗？",function(index){
					    $.ajax({
					        url: "DelPro",
					        type: "post",
					        dataType: "json",
					        data: {
                                Id:data.id
					        },
					        success: function (res) {
					            if (res.success == true) {
					                layer.close(index);

					                location.reload();
					            } else {
                                    layer.msg(res.msg)
					            }
					        },
					        error: function (e) {
					            console.log(e);
					        }
					    })

					});
				}
			});

		});
    </script>
}
